<template>
  <el-input
      v-model="formattedAmount"
      @input="onInput"
      :placeholder="placeholder"
      clearable
      @clear="onClear"
  />
</template>

<script>
export default {
  name: 'AmountInput',
  props: {
    value: {
      type: Number,
      default: 0,
      validator(value) {
        return !isNaN(value); // 检查是否是数字
      }
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formattedAmount: this.formatNumber(this.value) // 使用 value 初始化 formattedAmount
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(newValue) {
        this.formattedAmount = this.formatNumber(newValue); // 当父组件的值更新时进行格式化
      }
    }
  },
  methods: {


    onInput(value) {
      const cleanValue = this.cleanNumber(value); // 清理输入的数字


      // 如果输入为空或只输入负号，重置 formattedAmount 和发出 0
      if (cleanValue === '' || cleanValue === '-') {
        this.formattedAmount = cleanValue; // 保持负号显示
        this.$emit('input', 0); // 发送 0 值给父组件
        return;
      }

      // 检查输入的值是否有效并更新
      if (this.isValidDecimal(cleanValue)) {
        this.formattedAmount = this.formatNumber(cleanValue); // 格式化为千分位

        // 去除千分位后传递给父组件
        const unformattedValue = this.removeThousandSeparator(this.formattedAmount);
        console.log('传递给父组件的值：', unformattedValue)

        this.$emit('input', parseFloat(unformattedValue));
      } else {
        // 如果不合法，保持当前格式化
        this.formattedAmount = this.formatNumber(cleanValue);

        // 去除千分位后传递给父组件
        const unformattedValue = this.removeThousandSeparator(this.formattedAmount);
        console.log('传递给父组件的值：', unformattedValue)

        this.$emit('input', parseFloat(unformattedValue));
      }
    },
    formatNumber(value) {
      if (value === '' || value === null || value === undefined) return '';

      // 确保操作的值是字符串类型
      value = value.toString();

      // 检查是否有小数点
      const hasDecimal = value.includes('.');
      const isNegative = value.startsWith('-'); // 检查是否为负数

      // 将值转换为数值类型，确保不传入非法值
      const numericValue = Math.abs(parseFloat(value)) || 0; // 使用绝对值处理格式化，确保不为 NaN

      // 判断正负数并根据情况进行取整
      let integerPart = Math.floor(numericValue).toString(); // 向下取整

      let decimalPart;
      if (hasDecimal && value.split('.')[1].length > 2) {

         decimalPart = (isNegative ? Math.ceil(numericValue * 100) / 100 : Math.floor(numericValue * 100) / 100).toFixed(2).split('.')[1]
            ; // 保留两位小数并处理正负
      } else {
        // 获取小数部分
        decimalPart = hasDecimal ? value.split('.')[1].slice(0, 2) : '';
      }
      // 组装并返回格式化的字符串
      return `${isNegative ? '-' : ''}${integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}${hasDecimal ? '.' + decimalPart : ''}`;
    },
    cleanNumber(value) {
      // 清理输入，允许负号、小数点和数字
      // 允许负号在字符串开始位置，确保只有一个小数点
      const cleaned = value.replace(/[^0-9.-]+/g, ''); // 允许负号和小数点
      return cleaned;
    },
    isValidDecimal(value) {
      const parts = value.split('.');
      if (parts.length > 2) return false; // 不能有多个小数点
      if (parts.length === 2 && parts[1].length > 2) return false; // 小数部分不能超过两位
      return true;
    },
    // 去除千分位的函数，将千分位格式还原为普通数字
    removeThousandSeparator(value) {
      return value.replace(/,/g, ''); // 移除所有的逗号
    },

    // 添加清除事件的处理方法
    onClear() {
      this.formattedAmount = ''; // 清空输入框内容
      this.$emit('input', 0); // 发出 0 给父组件
    },
  }
};
</script>
